<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <style>
        .todo {
            width: 100%;
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .todo>ul {
            width: 20%;
        }

        .todo>ul li {
            height: 30px;
            border: solid 2px #e67e22;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 10px;
            color: #333;
            transition: 1s;
            width: 100%;
        }

        .todo>ul a {
            border-radius: 3px;
            width: 20px;
            height: 20px;
            text-decoration: none;
            text-align: center;
            background: #16a085;
            color: white;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 5px;
        }

        .todo>ul>.remove {
            border: solid 2px #eee;
            opacity: 0.8;
            color: #eee;
        }

        .todo>ul>.remove a {
            background: #eee;
        }
    </style>
</head>


<body>
    <div>
        <input type="text" name="select">
        <ul></ul>
    </div>
    <div class="todo">
        <ul>
            <li><span>123</span><a href="#">x</a></li>
            <li><span>123</span><a href="#">x</a></li>
            <li><span>123</span><a href="#">x</a></li>
        </ul>
    </div>
</body>
<script>
    // //set 具有唯一性 不能出现重复元素
    // let arr = [1, 1, 1, 1, 1, 1];
    // let set = new Set();
    // set.add(1);
    // set.add(1);
    // console.log(set); //Set(1) { 1; }
    // console.log(arr);//[1, 1, 1, 1, 1, 1]
    // //set 与array 对比 set具有唯一性
    // let obj = {
    //     1: '张三',
    //     '1': '李四'
    // };
    // console.log(obj);//{1: '李四'}
    // set.add('1');
    // console.log(set); //Set(2) {1, '1'}
    // //set object 对比 set中的类型不能也是不同 而object类型这不是
    //set语法
    // let set = new Set("yinduhuangjialigongxueyuan");//类似于 ([..."yinduhuangjialigongxueyuan"]);
    // console.log(set.size);//13
    // console.log(set.has('y'));//判断set中是否包含某个元素
    // set.forEach((item, index) => {
    //     //console.table(item, index); //其中 item =index  y y
    // });
    // console.log(set.delete('y'));//删除成功 返回true
    // console.log(set.has('y'));// 未找到 饭费 false
    // console.log(set.values());//返回迭代对象SetIterator {'i', 'n', 'd', 'u', 'h', …}
    // console.log(set.clear());//清空set中的所有元素 返回undefined
    // console.log(set.size);//返会 0
    //类型转换
    // let set = new Set(['张三', '李四']);
    // console.log(Array.from(set));//set类型转化为array类型
    // console.log([...set]);//set类型转化为array类型
    // 将数组 arr 去重  利用set类型的特性  唯一性 实现数组 去重
    // let arr = [1, 1, 1, 1, 1, 1, 1, 2];
    // arr = new Set(arr);
    // console.log([...arr]);// [1, 2]
    // //将set类型中的 set = 123456 小于 5 的数删掉 利用数组类型
    // let set = new Set([1, 2, 3, 4, 5, 6]);
    // set = new Set([...set].filter(item => item >= 5));
    // console.log(set);//Set(2) {5, 6} 实现目标
    //遍历set类型 的两个方法 forEach for of
    // let set = new Set(['张三', '李四']);
    // set.forEach(item => console.log(item));
    // for (const iterator of set) {
    //     console.log(iterator);
    // }
    //保存用户搜索关键字
    // let obj = {
    //     data: new Set(),
    //     set keyword(word) {
    //         this.data.add(word);
    //     },
    //     show() {
    //         let ul = document.querySelector('ul');
    //         ul.innerHTML = '';
    //         this.data.forEach(item => {
    //             ul.innerHTML += `<li>${item}</li>`;
    //         });
    //     }
    // };
    // document.querySelector('input').addEventListener('blur', e => {
    //     if (obj.data.has(document.querySelector('input').value)) alert("已存在不要在输入了");
    //     obj.keyword = document.querySelector('input').value;
    //     obj.show();
    // });
    //用户之间的 交集 并集 差集
    // let user1 = new Set([1, 2, 3, 4, 5]);
    // let user2 = new Set([3, 4, 5, 9, 2, 8]);
    // //交集 //1 2 3 4 5 9 8
    // let jiao = new Set([...user1, ...user2]);
    // console.log(jiao);//1 2 3 4 5 9 8
    // //并集 2, 3, 4, 5
    // let b = new Set([...user1].filter(item => user2.has(item)));
    // console.log(b);
    // //差集 [1, 9, 8]
    // // let c = [...user1].filter(item => !user2.has(item));
    // // console.log(c)
    // let c = [...jiao].filter(item => !b.has(item));
    // // console.log(b.values())
    // console.log(c)
    //weakSet 适用于 引用类型  其他与set相似 weakSet 示弱引用类型
    // let name = { name: '张三' };
    // let user = name;
    // let ws = new WeakSet();
    // let set = new Set();
    // ws.add(user);
    // set.add(user);
    // name = null;
    // user = null;
    // console.log(ws);//会显示空  无法自己引用需要借助其他变量引用  适用于删除的时候
    // console.log(set);//会显示张三  与weakSet的区别
    class Todos {
        constructor() {//构造方法  穿件对象是自动启动
            this.items = document.querySelectorAll('.todo li');
            this.lists = new WeakSet();
            this.addWealSet();
            this.addEvent();
        }
        addEvent() {
            this.items.forEach(item => {
                item.querySelector('a').addEventListener('click', e => {
                    const parentElement = e.target.parentElement;
                    if (this.lists.has(item)) {
                        parentElement.classList.add('remove');
                        this.lists.delete(parentElement);
                    } else {
                        parentElement.classList.remove('remove');
                        this.lists.add(item);
                    }


                });
            });
        }
        addWealSet() {
            this.items.forEach(item => {
                this.lists.add(item);
            });
        }
    }
    new Todos()

</script>


</html>